<template>
  <div class="info-form">
    <el-form ref="infoForm" :model="infoForm" size="small" label-width="100px">
      <el-form-item label="头像">
        <uploadImage :isCompress="true" ref="uploadImage" v-model="infoForm.coverUrl" :photo="[infoForm.coverUrl]" :img="infoForm.coverUrl"
                      v-on:addImage="addImage" :limit=1
                      v-on:removeImage="removeImage"></uploadImage>
      </el-form-item>

      <el-form-item label="类型">
        <el-radio-group v-model="infoForm.type">
          <el-radio :label="1">课程链接</el-radio>
          <el-radio :label="0">小程序</el-radio>
          <el-radio :label="2">其他</el-radio>
        </el-radio-group>
      </el-form-item>
     <el-form-item v-if="infoForm.type==1"  label="课程ID" prop="productId" :rules="[{
                    required: true, message: '课程ID名称不能为空', trigger: 'blur'
                  }]">
        <el-input maxlength="20" clearable v-model="infoForm.productId" size="small" placeholder="请输入课程ID"/>
      </el-form-item>
      <el-form-item v-if="infoForm.type==2"  label="单页链接" prop="linkUrl" :rules="[{
                     required: true, message: '单页链接不能为空', trigger: 'blur'
                   }]">
         <el-input maxlength="40" clearable v-model="infoForm.linkUrl" size="small" placeholder="请输入单页链接"/>
       </el-form-item>
        <el-form-item  label="排序" prop="sort" >
           <el-input maxlength="40" type="number" clearable v-model="infoForm.sort" size="small" placeholder="请输入排序"/>
         </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button icon="el-icon-document-add" :loading="addBtnLoading" type="primary" size="medium" @click="submitForm('infoForm')">提交
      </el-button>
      <el-button icon="el-icon-back" style="margin-left: 15px" size="medium" @click="closeWin('infoForm')">关闭
      </el-button>
    </div>
  </div>
</template>

<script>
  import gzhApi from '@/api/gzh/gzh'
  import uploadImage from '@/components/newUploadImage'

  export default {
    name: "member",
    data() {
      // 手机号验证
      var phoneReg = /^1\d{10}$/
      var validatePhone = (rule, value, callback) => {
        if (value) {
          if (!phoneReg.test(value)) {
            callback(new Error('请输入正确手机号码'));
          } else {
            callback();
          }
        } else {
          callback(new Error('手机号码必填'));
        }
      };
      return {
        paramsList:[



        ],
        addBtnLoading: false,
        // 手机号验证
        validatePhone: validatePhone,
      }
    },
    props: {
      infoForm: {
        type: Object,
        default() {
          return {};
        }
      },
    },
    created() {
    },
    mounted() {
    },
    components: {uploadImage},
    methods: {
      // 移除图片
      removeImage(){
        this.infoForm.coverUrl = ''
      },
      // 添加图片
      addImage(...data){
        this.infoForm.coverUrl = data[0]
      },
      // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          var parmseData=this.infoForm;
          if (valid) {
            let method = 'bannerAdd'
            if (this.infoForm.id) {
              method = 'bannerEdit'
            }else{
              parmseData.status=1;
            }
            this.addBtnLoading = true
            gzhApi[method](parmseData).then(res => {
              this.addBtnLoading = false
              this.$refs[formName].resetFields()
              this.$message({
                type: 'success',
                message: this.infoForm.id ? '修改成功' : '添加成功'
              })
              if (this.infoForm.id) {
                // 编辑
                this.$emit('submit',1)
              }else{
                // 添加
                this.$emit('submit',0)
              }
              // 调动关闭窗体方法
              this.$emit('closeWin')
            }).catch(e => {
              this.addBtnLoading = false
            })
          }
        })
      },
      // 关闭窗体
      closeWin() {
        this.$refs['infoForm'].resetFields()
        this.$emit('closeWin')
      }
    }
  }
</script>

<style lang="less">

</style>
